<script setup>
import {nextTick, reactive, ref, watch} from "vue";
import {ElLoading, ElMessage} from "element-plus";
import {Close} from '@element-plus/icons-vue'
import utils from "@/utils/storage";

const socket = ref(window.$io)
const loading = ref(false)
const emits = defineEmits(['success', 'task_success'])
const rules = {
  file: {
    required: true,
    message: '请上传文件',
    trigger: 'change'
  },
  name: {
    required: true,
    message: '请输入文件夹名称',
    trigger: 'blur'
  }
}
const form = reactive({
  fileList: [],
  desc: '',
  file: '',
  parent_id: null,
  is_folder: 0,
  name: '',
  type: 'file',
  size: '',
})
const props = defineProps(['file_type', 'file_path'])
import {invoke} from "@/utils/ipc_fn";

const showDialog = ref(false)
const upload = ref()
const formRef = ref()
const type = ref('')

function title() {
  if (type.value === 'file') {
    return '上传文件'
  } else {
    return '新建文件夹'
  }
}

function show(t, id) {
  type.value = t
  form.parent_id = id
  form.fileList = []
  form.name = ''
  form.desc = ''
  form.file = null
  showDialog.value = true

}

function beforeUpload() {
  let input = document.createElement('input')
  input.type = 'file'
  input.multiple = true
  input.click()
  input.onchange = function (v) {
    console.log(input.files)
    for (let i = 0; i < input.files.length; i++) {
      let file = input.files[i]
      let item = form.fileList.find(el => el.name === file.name)
      if (!item) {
        form.fileList.push({
          path: file.path,
          size: file.size,
          name: file.name
        })
      } else {
        ElMessage.warning('已上传该文件')
      }

    }
  }
  return false
}

function beforeUploadDict() {
  // 选择文件夹
  invoke('selectFolder', '').then(r => {
    form.name = r
  })
}

function submit() {
  console.log(form)
  if (form.type === 'file') {
    if (form.fileList.length === 0) {
      return ElMessage.warning('请上传文件夹或文件')
    }
  } else {
    if (!form.name) return ElMessage.warning('请上传文件夹或文件')
  }
  showDialog.value = false
  emits('success', form)
}

defineExpose({
  show
})
</script>

<template>
  <div>
    <el-dialog :loading="loading" draggable width="700px" v-model="showDialog" :title="title()">
      <el-form ref="formRef" :rules="rules" label-width="100px" :model="form">
        <el-form-item label="上传类型">
          <el-radio-group v-model="form.type">
            <el-radio label="file">文件</el-radio>
            <el-radio label="folder">文件夹</el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="form.type==='file'">
          <el-form-item label="文件" prop="file">
            <el-button @click="beforeUpload" type="primary">点击上传</el-button>
          </el-form-item>
          <ul class="fileList" v-if="form.fileList.length>0">
            <li v-for="(file,i) in form.fileList" :key="i">
              <span>{{ file.name }}</span>
              <span>{{utils.renderSize(file.size)  }}</span>
              <el-icon @click="form.fileList.splice(i,1)" color="red">
                <Close/>
              </el-icon>
            </li>
          </ul>
        </template>

        <template v-else>
          <el-form-item label="文件夹" prop="folder_path">
            <el-button @click="beforeUploadDict">选择文件夹</el-button>
          </el-form-item>
          <el-form-item label="文件夹地址" prop="name">
            <el-input disabled v-model="form.name" maxlength="255" show-word-limit
                      clearable></el-input>
          </el-form-item>
        </template>

      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button @click="submit" type="primary">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.fileList {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  padding: 20px 50px;
  border: 1px solid #ececec;
  max-height: 200px;
  overflow-y: auto;

  li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;

    span {
      display: inline-block;
      text-align: left;
      width: 90%
    }

    i {
      cursor: pointer;
    }
  }

}

.upload-demo {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  ::v-deep(.el-upload-list) {
    width: 100%;
    display: flex;
    justify-content: flex-start;

    .el-upload-list__item-info {
      width: 100%;
    }
  }
}

::v-deep(.el-upload) {
  display: flex;
  justify-content: flex-start;
  width: 100%;

  .el-upload-dragger {
    width: 100%;
  }
}
</style>
